<template>
    <div class="input">
        <div class="enter">
            <input type="text" placeholder="添加要做的事儿..." v-model="ipt" >
        </div>
        <button type="submit" class="submit-btn" @click="handleClick">
            <span>提交</span>
        </button>
    </div>
</template>



<script setup>
import {defineEmits,ref} from "vue"


// 给input绑定数据
let ipt = ref()

// 通过子传父将输入框中的值，传递到父组件中
let emits = defineEmits(['add'])
let handleClick = ()=>{
    emits('add',ipt.value)
    ipt.value = ''
}



</script>




<style scoped>
.input input{
    background: transparent;
    border: 0;
    border-bottom: 3px dashed #00bfff;
    font-size: 18px;
    outline: 0;
    padding: 5px 0 3px;
    width: 100%;
}
.enter{
    width: 300px;
    margin-right: 60px;
}
    .submit-btn {
        outline: none;
    border: none;
    background-color: transparent;
    cursor: pointer;
    position: relative;
    transform: rotate(4deg);
    border-radius: 6px;
    transition: transform .25s cubic-bezier(.175, .885, .32, 1.275);
}

.submit-btn span {
    position: relative;
    display: block;
    font-size: 16.5px;
    padding: 0.34em 0.84em;
    border: 2px solid #494a4b;
    border-radius: inherit;
    background-color: #fff;
}

.submit-btn:before {
    position: absolute;
    left: 0px;
    top: 0px;
    content: "";
    width: 100%;
    height: 100%;
    transform: scaleY(1.1);
    border: 1px solid #494a4b;
    border-radius: inherit;
    transform-origin: top;
    background-color: #fe7345;
    transition: transform .25s cubic-bezier(.175, .885, .32, 1.275);
}
.input{
    width: 100%;
    display: flex;
    justify-content: center;

}
</style>